<template>
  <div class="formContainer">
    <div class="left-board">
      <!-- <div class="d-logo-wrapper">
        <div class="d-logo"> formDesigner3 </div>
      </div> -->
      <el-scrollbar class="left-scrollbar">
        <!--左侧组件列表-->
        <div class="components-list">
          <div class="components-title"> 常用组件 </div>
          <draggable
            class="components-draggable"
            :list="formItems"
            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
            :clone="cloneComponent"
            draggable=".components-item"
            :sort="false"
            item-key="index"
            @start="onStart"
            @end="onEnd"
          >
            <template #item="{ element }">
              <div class="components-item" @click="addComponent(element)">
                <div class="components-body">
                  <icon :code="element.compIcon" :text="element.compName" />
                </div>
              </div>
            </template>
          </draggable>
          <div class="components-title"> 布局组件 </div>
          <draggable
            class="components-draggable"
            :list="layoutFormItems"
            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
            :clone="cloneComponent"
            draggable=".components-item"
            :sort="false"
            item-key="index"
            @start="onStart"
            @end="onEnd"
          >
            <template #item="{ element }">
              <div class="components-item" @click="addComponent(element)">
                <div class="components-body">
                  <icon :code="element.compIcon" :text="element.compName" />
                </div>
              </div>
            </template>
          </draggable>
          <div class="components-title"> 辅助组件 </div>
          <draggable
            class="components-draggable"
            :list="assistFormItems"
            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
            :clone="cloneComponent"
            draggable=".components-item"
            :sort="false"
            item-key="index"
            @start="onStart"
            @end="onEnd"
          >
            <template #item="{ element }">
              <div class="components-item" @click="addComponent(element)">
                <div class="components-body">
                  <icon :code="element.compIcon" :text="element.compName" />
                </div>
              </div>
            </template>
          </draggable>
        </div>
      </el-scrollbar>
    </div>
    <designer
      ref="designer"
      :formId="formId"
      :list="designList"
      :form-config="formConfig"
      :active-data="activeData"
      @clear="designList = []"
      @updateJSON="handlerUpdateJSON"
    />
  </div>
</template>
<script>
  import draggable from 'vuedraggable';
  import designer from './designer.vue';
  import icon from './icon.vue';
  import { getSimpleId, setTableId } from './utils/IdGenerate';
  import { jsonClone } from './utils';
  import { formItems, assistFormItems, layoutFormItems } from './custom/itemList';
  import formConf from './custom/formConf';
  let tempActiveData;
  export default {
    name: 'FormDesigner',
    components: {
      designer,
      icon,
      draggable,
    },
    props: {
      value: {
        type: String,
        default: '',
      },
      formId: String,
    },
    data() {
      return {
        formItems,
        assistFormItems,
        layoutFormItems,
        designList: [],
        activeData: {},
        formConfig: formConf,
      };
    },
    computed: {
      formData() {
        const list = this.designList;
        const config = this.formConfig;
        const formData = {};
        formData.list = list;
        formData.config = config;
        return JSON.stringify(formData);
        //this.$emit('input',JSON.stringify(formData));
      },
      dynamicTableExist() {
        return function (element) {
          return (
            this.formConfig.dynamicTableAllowed &&
            this.designList.filter((item) => item.compType === 'dynamicTable').length > 0 &&
            dynamicTableAllowedItems.includes(element.compType)
          );
        };
      },
    },
    watch: {
      value: {
        handler(newVal) {
          if (newVal !== '') {
            console.log(newVal, 'newVal');
            const formData = JSON.parse(newVal);
            console.log(formData, 'formData');
            this.designList = formData.list;
            this.formConfig = formData.config;
          }
        },
        immediate: true,
      },
    },
    mounted() {},
    methods: {
      addComponent(element) {},
      cloneComponent(origin) {
        let clone = {};
        clone = jsonClone(origin);
        if (!clone.layout) clone.layout = 'colItem';
        if (clone.layout === 'colItem' || clone.layout === 'dynamicItem') {
          const uId = `fd_${getSimpleId()}`;
          clone.id = uId;
          clone._id = uId;
          tempActiveData = clone;
        } else if (clone.layout === 'rowItem') {
          const uId = `row_${getSimpleId()}`;
          clone.id = uId;
          clone._id = uId;
          tempActiveData = clone;
        } else if (clone.layout === 'tableItem') {
          const uId = `table_${getSimpleId()}`;
          clone.id = uId;
          clone._id = uId;
          //增加td默认的id
          setTableId(clone);
          tempActiveData = clone;
        }
        this.$refs.designer.activeItem = tempActiveData;
      },
      onStart(evt) {},
      onEnd(obj) {
        if (obj.from !== obj.to) {
          this.activeData = tempActiveData;
          this.$refs.designer.activeItem = this.activeData;
          if (obj.to.className.indexOf('row-drag') < 0) {
            this.designList.splice(obj.newIndex, 0, this.activeData);
          }
        } else {
          this.$refs.designer.activeItem = {};
        }
      },
      getFormData() {
        return this.formData;
      },
      handlerUpdateJSON(json) {
        const jsonObject = JSON.parse(json);
        this.formConfig = jsonObject.config;
        this.designList = [];
        this.designList = this.designList.concat(jsonObject.list);
        this.$refs['designer'].changeFormConfig(this.formConfig);
      },
    },
  };
  document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
    }
</script>
<style scoped>
  .formContainer {
    padding: 0;
  }

  .dynamicTable-tips {
    border: 1px solid#F08080;
  }
</style>
